<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-绑定用户</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
    <script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/host.js') }}"></script>
      <script type="text/javascript" src="{{ static('js/common.js') }}"></script>
    <script>
        window.onload=function () {
            let vm = new Vue({
                el:'#app',
                delimiters:['[[',']]'],
                data:{
                    openid:'{{ openid }}',
                    tel:'',
                    error_tel:false,
                    password:'',
                    error_password:false,
                    code:'',
                    error_code:false,
                    error_code_message:'',
                    sms_code:'',
                    error_sms_code:false,
                    error_sms_code_message:'',
                    image_code_url:'',
                    error_tel_message:'',
                    sms_code_tip:'获取短信验证码',
                    sending_flag:false,

                },
                methods:{
                    //密码校验
                    check_password(){
                        let de = /^[a-zA-Z0-9_-]{8,20}$/;
                        if (de.test(this.password)){
            {#                匹配上不显示#}
                            this.error_password = false;
                        }else{
                            this.error_password = true;
                        }
                        },
                    //手机号校验,不用判断重复,传给后端判断
                    check_tel(){
                        let de =/^1[3-9]\d{9}$/;
                        if (de.test(this.tel)){
                            //如果书写正确
                            this.error_tel = false;

                        }else {
                            this.error_tel_message ='请输入正确的手机号';
                            this.error_tel = true;
                        }
                    },
                    //短信验证码检验
                    check_sms_code(){
                        if (this.sms_code.length != 4){
                            this.error_sms_code_message = '请填写四位数短信验证码';
                            this.error_sms_code = true
                        }else {
                            //如果确实填写了规范的短信验证码
                            //判断是否正确 axios
                            let check_sms_url = '/check_sms_code/' +this.mobile +'/'+ this.sms_code + '/';
                            axios.get(check_sms_url,{responseType:"json"}).then(response=>{
                                if (response.data.ret == 0){
                                    //验证成功
                                    this.error_sms_code = false;
                                }else {
                                    this.error_sms_code_message = '短信验证码输入错误';
                                    this.error_sms_code = true;
                                }
                            }).catch();


                        }
                    },
                    send_sms_code(){
                        //点击按钮就检查这两项， 手机号和验证码是否正确，如果不正确则返回
                        this.check_tel();
                        this.check_code();
                        if (this.error_tel == true || this.error_code==true){
                            return;
                        }
                        if (this.sending_flag == true){
                            return
                        }
                        //运行一次变为真,下次则不能再发起请求了，避免重复发送
                        this.sending_flag = true;
                        //验证通过就发送短信验证码，通过axios
                        //拼接url   通过查询传参数 手机号 图片验证码 uuid
                        let sms_url = '/sms_codes/' + this.tel +'/?code=' + this.code +'&uuid='+ this.uuid;
                        axios.get(sms_url,{responseType:'json'}).then(response=>{
                            if (response.data.code1 == '0'){
                                //发送成功 ,开始倒计时5分钟
                                let num = 300;
                                let t = setInterval(()=>{
                                    if (num == 1){
                                        clearInterval(t);
                                        this.sms_code_tip = '获取短信验证码';
                                        //表示可以再次发送
                                        this.sending_flag = false;
                                }else {
                                        num = num-1;
                                        this.sms_code_tip = '请在'+ num + '秒内输入';

                                    }
                                },1000);

                            }
                            else if (response.data.code1 == '4004'){
                                    //表示验证码失效了
                                    this.error_code_message = response.data.errmsg;
                                    this.error_code = true
                                }
                            else if (response.data.code1 == '4001'){
                                    this.error_code_message = response.data.errmsg;
                                    this.error_sms_code = true;
                                }
                            else if (response.data.code1 == '2'){
                                this.error_sms_code_message = response.data.errmsg;
                                this.error_sms_code = true;
                            }
                        }).catch()
                    },
                    //图片验证码
                    check_code(){
                        //非真即假
                        if (!this.code){
                            this.error_code_message = '请输入图片验证码';
                            this.error_code = true;
                        }else{
                            //如果有数据则执行：
            {#                this.error_code = false;#}
                            //发起axios到后台redis数据库检测是否存在
                            //1拼接url
                            let code_url = '/testcode/' + this.uuid + '/';
                            //2.axions

                            axios.get(code_url,{responseType:"json"}).then(response=>{
                                if (response.data.text == this.code.toLocaleLowerCase()){
                                    this.error_code = false;

                                }else{
                                    this.error_code_message = '图片验证码输入错误,请您重新输入';
                                    this.error_code = true;
                                }
                            }).catch();
                        }
        },
                    //生成uuid并且拼接生成图片的后台url
                    generate_image_code(){
                    this.uuid = generateUUID();
                    this.image_code_url = '/image_codes/' + this.uuid + '/'
                    },
                    on_submit(){
                        this.check_tel();
                        this.check_password();
                        this.check_code();
{#                        this.check_sms_code();#}
                        if (this.error_password==true||this.error_tel==true||
                        this.error_code==true) {
                            window.event.returnValue = false;
                        }


        },



                    },
                mounted(){
                    this.generate_image_code()
                },


            })
        }
    </script>
</head>
<body>
    <div id="app">
        <div>
            <div class="register_con">
                <div class="l_con fl">
                    <a href="{{ url('index') }}" class="reg_logo"><img src="{{ static('images/logo.png')}}"></a>
                    <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
                    <div class="reg_banner"></div>
                </div>

                <div class="r_con fr">
                    <div class="reg_title clearfix">
                        <h1>绑定用户</h1>
                    </div>
                    <div class="reg_form clearfix">
                        <form id="reg_form" method="post" @click="on_submit">
                            <ul>

                                <li>
                                    <label>手机号:</label>
                                    <input type="text" name="mobile" id="phone" @blur="check_tel" v-model="tel">
                                    <span class="error_tip" v-show='error_tel'>[[error_tel_message]]</span>
                                </li>
                                <li>
                                    <label>密码:</label>
                                    <input type="password" name="pwd" id="pwd" @blur="check_password" v-model="password">
                                    <span class="error_tip" v-show="error_password">请输入8-20位密码</span>
                                </li>
                                <li>
                                    <label>图形验证码:</label>
                                    <input type="text" name="pic_code" id="pic_code" class="msg_input" @blur="check_code" v-model="code">
                                    <img :src='image_code_url' @click="generate_image_code" alt="图形验证码" class="pic_code">
                                    <span class="error_tip" v-show="error_code">[[error_code_message]]</span>
                                </li>
                                <li>
                                    <label>短信验证码:</label>
                                    <input type="text" name="sms_code" id="msg_code" class="msg_input" @blur="check_sms_code" v-model="sms_code">
                                    <a href="" class="get_msg_code" @click="send_sms_code">[[sms_code_tip]]</a>
                                    <span class="error_tip" v-show="error_sms_code">请填写短信验证码</span>
                                </li>
                                <li class="reg_sub">
                                    <input type="hidden" name="openid" v-model="openid">
                                    <input type="submit" value="保 存" name="">
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>

            <div class="footer no-mp">
                <div class="foot_link">
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系我们</a>
                    <span>|</span>
                    <a href="#">招聘人才</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                </div>
                <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
                <p>电话：010-****888    京ICP备*******8号</p>
            </div>
        </div>
    </div>
{#    <script type="text/javascript" src="js/oauth_callback.js"></script>#}
</body>
</html>